<template>
	<view class="bg-or height-100 overflow-hidden">
		<view class="bg-white padding-lr margin-top-sm padding-tb-xs">
			<view class="margin-top margin-bottom-sm">
				<text class="text-df">姓名</text>
			</view>
			<input type="text" class="padding bg-white radius" v-model="form.userName" placeholder="请输入姓名"
				placeholder-class="text-smd color-gray" maxlength="60" />
			<view class="margin-top margin-bottom-sm">
				<text class="text-df">手机号</text>
			</view>
			<input type="text" class="padding bg-white radius" v-model="form.userPhone" placeholder="请输入手机号"
				placeholder-class="text-smd color-gray" maxlength="60" />
			<view class="margin-top margin-bottom-sm">
				<text class="text-df">服务内容</text>
			</view>
			<view class="padding bg-white radius-xl">
				<textarea v-model="form.content" :adjust-position="false"
					style="width: 630rpx; height: 150rpx;" placeholder="请输入正文" placeholder-class="text-smd color-gray"
					maxlength="200" />
			</view>
			<view class="margin">
				<view class="flex justify-between">
					<text class="">相关报告</text>
				</view>
				<view class="flex-direction-row flex-wrap padding-tb">
					<block v-for="(item,index) in form.imageUrlList" :key="index">
						<view class="position-relative">
							<image :src="item" mode="aspectFit" class="cu-thumb margin-right-xs radius"></image>
							<uni-icons type="clear" size="30" color="#ff5722"
								style="position: absolute; right: 0; top: -10px;"
								@click="delImage(index)" v-if="isEduit"></uni-icons>
						</view>
					</block>
				</view>
				<view class="radius bg-white flex-direction-row justify-center align-center margin-top"
					style="width: 120rpx; height: 120rpx;" @click="chooseImage()" v-if="isEduit" >
					<text class="text-xxl iconfont">&#xe727;</text>
				</view>
			</view>
		</view>
		<view style="height: 120rpx;"></view>
		<view class="padding-tb-sm bg-df radius-sl text-center margin-xl" @click="submit()" v-if="isEduit">
			<text class="text-lg color-white">确定</text>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			console.log(12321,option)
			// 无需报名，直接进来服务
			if(option.activityId){
				this.form.id = option.activityId
			}
			// 需要报名，进来查详情
			if(option.serviceId&&option.status=='1'){
				this.getDetail(option.serviceId)
			}else{
				// 需要报名，进来新增服务，带上人+电话
				this.form.id = option.serviceId
				this.form.activityId = option.activityId
				this.form.userName = option.userName
				this.form.userPhone = option.userPhone
			}
		},
		data() {
			return {
				form: {
					userName: '',
					userPhone: '',
					content: '',
					imageUrlList: [],
					id:null
				},
				isEduit:true
			};
		},
		methods: {
			async getDetail(serviceId){
				const res = await uni.$request.get(`/activity/detail/${serviceId}`);
				this.form = res.data
				this.isEduit = false
			},
			delImage(index) {
				this.form.imageUrlList.splice(index, 1);
			},
			// 上传图片
			chooseImage() {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						res.tempFilePaths.map(item => {
							this.uploadFile(item)
						})
					}
				});
			},
			uploadFile(tempFilePath) {
				uni.uploadFile({
					url: 'https://ytl.mifanny.com/api/commonApi/upload', //仅为示例，非真实的接口地址
					filePath: tempFilePath,
					name: 'file',
					formData: {
						'type': 'test'
					},
					success: (uploadFileRes) => {
						console.log('uploadFile:', uploadFileRes);
						let data = JSON.parse(uploadFileRes.data);
						this.form.imageUrlList.push(data.fileName);
					}
				});
				console.log('this.uploadImages: ', this.form.imageUrlList);
			},
			async submit() {
				if(!this.form.userName){
					return uni.showToast({
						title: '请填写姓名',
						icon: "none"
					});
				}
				if(!this.form.userPhone){
					return uni.showToast({
						title: '请填写手机号',
						icon: "none"
					});
				}
				if(!this.form.content){
					return uni.showToast({
						title: '请填写服务内容',
						icon: "none"
					});
				}
				const res = await uni.$request.post('/activity/addServiceInfo', this.form);
				if (res.code == 200) {
					uni.showToast({
						title: '添加成功',
						icon: "none"
					});
					// 通知上一页更新数据列表
					setTimeout(function() {
						uni.$emit('updateReport');
						uni.navigateBack()
					}, 800);
				} else {
					uni.showModal({
						title: '提示',
						content: '添加失败',
						showCancel: false
					})
				}
			},
		},
	};
</script>

<style scoped>
	/* 自定义样式（如有需要） */
	.widthSty {
		width: 50%;
	}
</style>